<template>
  <footer>
    <div class="column">
      <div class="row" v-for="item in data1" :key="item">
        {{ item }}
      </div>
    </div>
    <div class="column">
      <div class="row" v-for="item in data2" :key="item">
        {{ item }}
      </div>
    </div>
    <div class="column">
      <div class="row">
        <LockOutlined style="margin-right: 10px" />
        <span>Members Only</span>
      </div>
    </div>
    <div class="column">
      <div class="row">
        <img
          src="@/assets/svg/twitter.svg"
          alt="Twitter"
          style="margin-right: 10px"
        />
        <span>in</span>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { LockOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";
const data1 = ref([
  "Ecma International",
  "Rue du Rhone 114",
  "1204 Geneva",
  "Switzerland",
]);

const data2 = ref([
  "About Ecma",
  "Publications and standards",
  "Policies",
  "Contact",
  "Committees",
  "News",
]);
</script>
<style lang="scss" scoped>
footer {
  height: 335px;
  background: #e38134;
  display: flex;
  padding: 60px 250px;
  justify-content: space-between;
  .column {
    .row {
      color: #000;
      cursor: pointer;
      margin: 8px 0;
    }
  }
  div.column {
    filter: invert(1);
  }
}
</style>
